<template>
  <view>
    <view class="header" :style="{ position: headerPosition, top: headerTop }">
      <view
        class="target"
        v-for="(target, index) in orderbyList"
        @tap="select(index)"
        :key="index"
        :class="[target.selected ? 'on' : '']"
      >
        {{ target.text }}
        <view
          v-if="target.orderbyicon"
          class="icon"
          :class="target.orderbyicon[target.orderby]"
        ></view>
      </view>
    </view>
    <!-- 占位 -->
    <view class="place"></view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view class="product-list">
        <view
          class="product"
          v-for="goods in goodsList"
          :key="goods.goods_id"
          @tap="toGoods(goods)"
        >
          <image mode="widthFix" :src="goods.img"></image>
          <view class="name">{{ goods.name }}</view>
          <view class="info">
            <view class="price">{{ goods.price }}</view>
            <view class="slogan">{{ goods.slogan }}</view>
          </view>
        </view>
      </view>
      <view class="loading-text">{{ loadingText }}</view>
    </view>
  </view>
</template>

<script>
import { BASE_URL } from "@/common/utils/request.js";
export default {
  data() {
    return {
      BASE_URL,
      goodsList: [
        {
          goods_id: 0,
          img: "/static/img/goods/p1.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 1,
          img: "/static/img/goods/p2.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 2,
          img: "/static/img/goods/p3.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 3,
          img: "/static/img/goods/p4.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 4,
          img: "/static/img/goods/p5.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 5,
          img: "/static/img/goods/p6.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 6,
          img: "/static/img/goods/p7.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 7,
          img: "/static/img/goods/p8.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 8,
          img: "/static/img/goods/p9.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
        {
          goods_id: 9,
          img: "/static/img/goods/p10.jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        },
      ],
      loadingText: "正在加载...",
      headerTop: "0px",
      headerPosition: "fixed",
      orderbyList: [
        { text: "销量", selected: true, orderbyicon: false, orderby: 0 },
        {
          text: "价格",
          selected: false,
          orderbyicon: ["sheng", "jiang"],
          orderby: 0,
        },
        { text: "好评", selected: false, orderbyicon: false, orderby: 0 },
      ],
      orderby: "sheng",
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    uni.setNavigationBarTitle({
      title: option.name,
    });

    //兼容H5下排序栏位置
    // #ifdef H5
    //定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
    let Timer = setInterval(() => {
      let uniHead = document.getElementsByTagName("uni-page-head");
      if (uniHead.length > 0) {
        this.headerTop = uniHead[0].offsetHeight + "px";
        clearInterval(Timer); //清除定时器
      }
    }, 1);
    // #endif
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    if (e.scrollTop >= 0) {
      this.headerPosition = "fixed";
    } else {
      this.headerPosition = "absolute";
    }
  },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(() => {
      this.reload();
      uni.stopPullDownRefresh();
    }, 1000);
  },
  //上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
  onReachBottom() {
    uni.showToast({ title: "触发上拉加载" });
    let len = this.goodsList.length;
    if (len >= 40) {
      this.loadingText = "到底了";
      return false;
    } else {
      this.loadingText = "正在加载...";
    }
    let end_goods_id = this.goodsList[len - 1].goods_id;
    for (let i = 1; i <= 10; i++) {
      let goods_id = end_goods_id + i;
      let p = {
        goods_id: goods_id,
        img:
          "/static/img/goods/p" +
          (goods_id % 10 == 0 ? 10 : goods_id % 10) +
          ".jpg",
        name: "商品名称商品名称商品名称商品名称商品名称",
        price: "￥168",
        slogan: "1235人付款",
      };
      this.goodsList.push(p);
    }
  },
  methods: {
    reload() {
      let tmpArr = [];
      this.goodsList = [];
      let end_goods_id = 0;
      for (let i = 1; i <= 10; i++) {
        let goods_id = end_goods_id + i;
        let p = {
          goods_id: goods_id,
          img:
            "/static/img/goods/p" +
            (goods_id % 10 == 0 ? 10 : goods_id % 10) +
            ".jpg",
          name: "商品名称商品名称商品名称商品名称商品名称",
          price: "￥168",
          slogan: "1235人付款",
        };
        this.goodsList.push(p);
      }
    },
    //商品跳转
    toGoods(e) {
      uni.showToast({ title: "商品" + e.goods_id, icon: "none" });
      uni.navigateTo({
        url: "../goods",
      });
    },
    //排序类型
    select(index) {
      let tmpTis = this.orderbyList[index].text + "排序 ";
      if (this.orderbyList[index].orderbyicon) {
        let type = this.orderbyList[index].orderby == 0 ? "升序" : "降序";
        if (this.orderbyList[index].selected) {
          type = this.orderbyList[index].orderby == 0 ? "降序" : "升序";
          this.orderbyList[index].orderby =
            this.orderbyList[index].orderby == 0 ? 1 : 0;
        }
        tmpTis += type;
      }
      this.orderbyList[index].selected = true;
      let len = this.orderbyList.length;
      for (let i = 0; i < len; i++) {
        if (i != index) {
          this.orderbyList[i].selected = false;
        }
      }
      uni.showToast({ title: tmpTis, icon: "none" });
    },
  },
};
</script>

<style lang="scss">
.icon {
  font-size: 26upx;
}
.header {
  width: 92%;
  padding: 0 4%;
  height: 79upx;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #fff;
  border-bottom: solid 1upx #eee;
  .target {
    width: 20%;
    height: 60upx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28upx;
    margin-bottom: -2upx;
    color: #aaa;
    &.on {
      color: #555;
      border-bottom: 4upx solid #f06c7a;
      font-weight: 600;
      font-size: 30upx;
    }
  }
}
.place {
  background-color: #ffffff;
  height: 100upx;
}
.goods-list {
  .loading-text {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60upx;
    color: #979797;
    font-size: 24upx;
  }
  .product-list {
    width: 92%;
    padding: 0 4% 3vw 4%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .product {
      width: 48%;
      border-radius: 20upx;
      background-color: #fff;
      margin: 0 0 15upx 0;
      box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
      image {
        width: 100%;
        border-radius: 20upx 20upx 0 0;
      }
      .name {
        width: 92%;
        padding: 10upx 4%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-align: justify;
        overflow: hidden;
        font-size: 30upx;
      }
      .info {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 92%;
        padding: 10upx 4% 10upx 4%;

        .price {
          color: #e65339;
          font-size: 30upx;
          font-weight: 600;
        }
        .slogan {
          color: #807c87;
          font-size: 24upx;
        }
      }
    }
  }
}
</style>
